import React, {memo, useCallback, useState} from 'react';
import {Popover} from 'antd';

import JPopover from "@/components/popover";
import {apiGetMembers} from "@/api/major";
import {TooltipPlacement} from "antd/lib/tooltip";

interface IProps {
  url_token: string
  avatar: any
  placement?: TooltipPlacement
}

const JAppPopover = (props: IProps) => {

  const [userInfo, setUserInfo] = useState({});

  const onVisibleChange = useCallback(async () => {
    const data = await apiGetMembers({}, true)
    setUserInfo(data);
  }, [props.url_token]);

  return (
    <Popover
      content={<JPopover {...userInfo} />}
      onVisibleChange={onVisibleChange}
      placement={props.placement && "bottomRight"}
    >
      {props.avatar}
    </Popover>
  )
}

export default memo(JAppPopover)
